<template>
  <div class="speciesQueryList">
    <div class="query-breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/gene-data/home' }"
          >GeneData</el-breadcrumb-item
        >
        <el-breadcrumb-item>Browse</el-breadcrumb-item>
        <el-breadcrumb-item>Species</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-scrollbar height="600px">
      <div class="query-content content-loading">
        <BasicContainer>
          <vpro-table
            :select="false"
            :columns="tableColumns"
            :data="state.tableData"
          >
            <template v-slot:subject="slotProps">
              <a
                target="_blank"
                style="color: blue"
                :href="
                  'https://www.baidu.com/s?ie=UTF-8&wd=' + slotProps.row.subject
                "
                >{{ slotProps.row.subject }}</a
              >
            </template>
          </vpro-table>
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.currentPage"
            :page-sizes="[10, 30, 50, 100]"
            :page-size="page.length"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.count"
          >
          </el-pagination>
        </BasicContainer>
      </div>
    </el-scrollbar>
  </div>
</template>

<script setup>
import BasicContainer from '@/components/vpro-materials/basic-container/BasicContainer.vue'
import VproTable from '@/components/vpro-materials/vpro-table/vProTable.vue'
import { reactive, ref } from '@vue/reactivity'
import { getAllSpeciesDataByHost } from '@/api/index.js'
import { useRoute, useRouter } from 'vue-router'
import { ElMessageBox } from 'element-plus'
import { ElMessage } from 'element-plus'
const route = useRoute()
const router = useRouter()
let state = reactive({
  tableData: []
})
let tableColumns = [
  {
    type: 'string',
    dataIndex: 'id',
    width: '80',
    title: 'ID'
  },
  {
    type: 'string',
    dataIndex: 'accession',
    width: '120',
    title: 'accession'
  },
  {
    type: 'string',
    dataIndex: 'size',
    title: 'size',
    customRender: (row) => {
      if (isNaN(parseInt(row.size)))
        return file_size_convert(parseInt(row.size, 16))
      else return file_size_convert(parseInt(row.size))
      // return file_size_convert(parseInt(row.size))
    }
  },
  {
    type: 'string',
    dataIndex: 'md5',
    title: 'md5'
  },
  {
    type: 'string',
    dataIndex: 'host',
    title: 'host'
  },
  {
    type: 'string',
    dataIndex: 'prjid',
    width: '130',
    title: 'prjId'
  },
  {
    type: 'string',
    dataIndex: 'samid',
    width: '130',
    title: 'samId'
  },
  {
    type: 'string',
    dataIndex: 'organ',
    width: '200',
    title: 'organ'
  },
  {
    type: 'action',
    title: '操作',
    width: '120',
    fixed: 'right',
    actions: [
      {
        title: '查看',
        click: (row) => {
          const { href } = router.resolve({
            path: '/gene-data/species-xml/' + row.id
          })
          window.open(href, '_blank')
        }
      },
      {
        title: '下载',
        click: (row) => {
          // console.log(row)
          downloads(row.id)
        }
      }
    ]
  }
]
const query = route.path.split('/')[route.path.split('/').length - 1]

let page = {
  count: 0,
  length: 10,
  currentPage: 1
}
const handleSizeChange = (val) => {
  page.length = val
  getAllPage()
}
const handleCurrentChange = (val) => {
  page.currentPage = val
  getAllPage()
}
let getAllPage = function () {
  getAllSpeciesDataByHost(query, page.currentPage, page.length)
    .then((result) => {
      state.tableData = result.data
      page.count = result.total
      page.currentPage = result.pageNum
      page.length = result.pageSize
    })
    .catch((err) => {
      console.log(err)
    })
}
getAllPage()

// 内存转换
let file_size_convert = function (length) {
  let units = ['B ', 'KB', 'MB', 'GB', 'TB', 'ZB']
  let i = 0
  while (length >= 1024) {
    length /= 1024
    i += 1
  }
  // console.log(i)
  return Math.round(length * 100) / 100 + ' ' + (units[i] || units[i / 6])
}

// 下载
const downloads = (id) => {
  ElMessageBox.confirm('确定要下载该文件吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      ElMessage({
        type: 'success',
        message: 'id: ' + id + ' 下载成功!'
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消下载'
      })
    })
}
</script>

<style lang="scss" scoped>
.query-content {
  width: 80%;
  height: 100%;
  margin: 0 auto;
  padding-bottom: 100px;
  .vpro-table {
    height: 100%;
  }
  .el-pagination {
    margin: 20px auto;
    display: flex;
    justify-content: center;
  }
  &:deep() {
    .el-pagination.is-background .el-pager li:not(.disabled) {
      background-color: #fff; // 进行修改未选中背景和字体
    }
    .el-pagination.is-background .el-pager li:not(.disabled).active {
      background-color: #419641; // 进行修改选中项背景和字体
      color: #fff;
    }
  }
}
.query-breadcrumb {
  width: 80%;
  margin: 5px auto;
  height: 50px;
  display: flex;
  align-items: center;
}
.el-loading-spinner {
  stroke: #419641;
}
</style>